<%@ page import="com.party.core.model.system.TargetType" %>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="../include/tag.jsp"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<title>${resource == null ? '发布' : '编辑'}资源</title>
<%@include file="../include/commonFile.jsp"%>
<link rel="stylesheet" href="${ctx}/css/common/list.css">
<link rel="stylesheet" href="${ctx}/css/ui/activity/publish_form.css">
</head><body>
<!--头部-->
<%@include file="../include/header.jsp"%>
<div class="index-outside">
	<%@include file="../include/sidebar.jsp"%>
	<!--内容-->
	<section>
		<div class="section-main">
			<!-- 正文请写在这里 -->
			<div class="add-form-content">
			<form id="myForm" class="layui-form mt20" method="post" action="${ctx}/resource/resource/save.do">
				<input type="hidden" name="id" value="${resource.id}" />
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">资源类型<span class="f-verify-red">*</span></label>
						<div class="layui-input-inline">
							<select name="type" lay-verify="type"  lay-filter="type">
								<option value="">请选择类型</option>
								<c:forEach var="type" items="${resourceTypes}">
									<option value="${type.value}" ${resource.type == type.value ? 'selected="selected"' : ""}>${type.label}</option>
								</c:forEach>
							</select>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">标题<span class="f-verify-red">*</span></label>
					<div class="layui-input-block">
						<input type="text" name="title"  class="layui-input" value="${resource.title}">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">描述<span class="f-verify-red"></span></label>
					<div class="layui-input-block">
						<input type="text" name="remarks"  class="layui-input" value="${resource.remarks}">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">图片<span class="f-verify-red">*</span></label>
					<div class="cover-content">
						<input type="hidden" name="pic" id="pic" lay-verify="pic" value="${resource.pic}" />
						<c:if test="${resource == null || empty resource.pic}">
							<span id="cover-img" class="cover-img" style="background-image:url(${ctx}/image/posterImg.png)"></span>
						</c:if>
						<c:if test="${resource != null && not empty resource.pic}">
							<span id="cover-img" class="cover-img" style="background-image:url('${resource.pic}')"></span>
						</c:if>
						<a class="layui-btn layui-btn-danger" id="sel_pic_img">+添加图片</a>
					</div>
				</div>

				<div class="layui-form-item" id="video_link" <c:if test="${resource.type != 'video'}">style="display: none"</c:if>>
					<label class="layui-form-label">视频</label>
					<div class="layui-input-block">
						<input type="hidden" name="videoList" id="videoList" />
						<div style="margin-bottom: 10px;">
							<textarea class="layui-textarea video-link" style="width: calc(100% - 140px);float: left; margin-right: 10px;resize:none" placeholder="视频链接"
									  readonly
									  name="videoLink" id="vide_code">${resource.link} </textarea>
							<a href="javascript:openUploadVideo()" class="red" style="display: inline-block; margin-bottom: 5px">添加视频</a>
							<a href="javascript:clearValue()" class="red" style="display: inline-block">清除视频</a>
						</div>
					</div>
				</div>

				<div class="layui-form-item" id="normal_link" <c:if test="${resource.type != 'video'}"> style="display: block;" </c:if><c:if test="${resource.type == 'video'}"> style="display: none;" </c:if>>
					<label class="layui-form-label">链接</label>
					<div class="layui-input-block">
						<input type="text" name="link" autocomplete="off" class="layui-input" value="${resource.link}" />
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">排序号</label>
						<div class="layui-input-inline">
							<input type="text" name="sort" lay-verify="sort" class="layui-input" value="${resource.sort}" >
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<a href="javascript:void(0)" class="layui-btn layui-btn-danger" lay-submit lay-filter="*">立即提交</a>
						<a href="${ctx}/resource/resource/resourceList.do" class="layui-btn layui-btn-primary">取消</a>
					</div>
				</div>
			</form>
			</div>
		</div><!--底部-->
		<%@include file="../include/footer.jsp"%>
	</section>
</div>
<script>
	$(function(){
        layui.use([ 'form', 'laydate' ], function() {
            var form = layui.form, laydate = layui.laydate;

            form.on('select(type)', function(data) {
                if (data.value == "video") {
                    $('#normal_link').hide();
                    $('#video_link').show();
                } else {
                    $('#normal_link').show();
                    $('#video_link').hide();
                }
            });

            form.verify({
                title : function(value) {
                    if (value == "") {
                        return '请填写资源标题';
                    }
                },
                pic : function(value) {
                    if (value == "") {
                        return "请上传资源图片";
                    }
                },
                sort : function(value) {
                    if (!util.checkNumber(value)) {
                        return "请输入正确的数字";
                    }
                }
            });

            //监听提交
            form.on('submit', function (data) {
                txz.submitObject(data.elem, function (callBack) {
                    var formData = getFormData();
                    var action = $("#myForm").attr("action");
                    txz.ajaxRequest({
                        method: 'post',
                        url: action,
                        saveCache: false,
                        params: formData,
                        callBack: function (res) {
                            typeof callBack === 'function' && callBack();
                            if (res.success) {
                                util.layerMsgSuccess("提交成功", function () {
                                    location.href = "${ctx}/resource/resource/resourceList.do";
                                });
                            } else {
                                util.layerMsgError("提交失败")
                            }
                        }
                    });
                });
                return false;
            });
        });
        $('#sel_pic_img').click(function () {
            txz.openSelImg({
                min: 1,
                max: 1,
                info: '建议尺寸：800x450',
                type: '<%=TargetType.RESOURCE.getCode()%>',
                cb: function (imgs) {
                    $('#cover-img').css('background-image', 'url(' + imgs[0].path + ')');
                    $('#pic').val(imgs[0].path);
                }
            })
        })
	});
    function getFormData() {
		var formData = util.serializeForm($('#myForm').serializeArray());
		if(formData['type'] == 'video'){
            formData['link'] = formData['videoLink'];
		}
        return formData;
    }
    function openUploadVideo(){
        txz.openSelVideo({
            min: 1,
            max: 1,
            backVideoOrIframe: 'video',
            type: '<%=TargetType.RESOURCE.getCode()%>',
            cb: function (imgs) {
                if (imgs.length) {
                    for (var i = 0, item; i < imgs.length; i++) {
                        item = imgs[i];
                        $("#vide_code").val(item.htmlStr);
                    }
                }
            }
        })
    }

    function clearValue() {
        $("#vide_code").val("");
    }
</script>
<script type="text/javascript">
    txz.initHeader({
        nav:[{
            name: '资源管理',
            href: '${ctx}/resource/resource/resourceList.do'
        },{
            name: '${resource == null ? '发布' : '编辑'}资源',
            curr: true
        }],
        btns:[{
            name: '返回',
            href: '${ctx}/resource/resource/resourceList.do',
            icon: 'back'
        }]
    });
</script>
</body>
</html>